$(function() {
	var items1 = ["imgbg", "movesun",
		"starmoon",
		"starmoon",
		"cloud"
	]

	var items2 = [
		".animate",
		".sun",
		".moon",
		".fa-star",
		".cloud"
	]
	var anicode = new Array(5)
	var keycode = new Array(5)
	var movecloud = new Array(6)

	keycode[0] =
		"@keyframes imgbg {<br>0% {background-image: url(../images/day3.png);}<br>16% {background-image: url(../images/day2.png);}<br>33% {background-image: url(../images/day1.png);}<br>50% {background-image: url(../images/day2.png);}<br>67% {background-image: url(../images/day4.png);}<br>83% {background-image: url(../images/day5.png);}<br>100% {background-image: url(../images/day6.png);}<br>}"
	keycode[1] =
		"@keyframes movesun {<br>0% {top: 320px;left: 0px;}<br>16% {top: 220px;left: 16%;}<br>33% {top: 120px;left: 33%;background-color: #fae034;}<br>50% {top: 120px;left:50%;background-color: #f9da0d;opacity: 0.5;}<br>67% {top: 220px;left: 67%;	background-color: #fac23b;opacity: 1.0;}<br>83% {top: 120px;left: 83%;}<br>100% {top: 120px;left: 101%;background-color: #f69f2d;}<br>}"
	keycode[2] =
		"@keyframes starmoon {<br>0% {opacity: 0;}<br>33% {opacity: 0.1;transform: rotate(30deg);}<br>50% {bopacity: 0.4;transform: rotate(90deg);}<br>67% {opacity: 0.7;transform: rotate(150deg);}<br>83% {opacity: 0.9;transform: rotate(210deg);}<br>100% {opacity: 1;transform: rotate(260deg);}<br>}"
	keycode[3] =
		"@keyframes cloud{<br>0%{opacity: 0.5;}<br>16%{opacity: 0.8;}<br>33% {opacity: 1;}<br>50% {bopacity: 0.5;}<br>67% {opacity: 0;}<br>100% {opacity: 0;}<br>}"
	movecloud[0] =
		"@keyframes movecloud1 {<br>0%{left: 3%;}<br>16%{left: 25%;}<br>33% {left: 47%;}<br>50% {left: 69%;}<br>67% {left: 91%;}<br>100% {left: 101%;}<br>}"
	movecloud[1] =
		"@keyframes movecloud2 {<br>0%{left: 230px;}<br>16%{left: 450px;}<br>33% {left: 670px;}<br>50% {left: 790px;}<br>100% {left: 101%;}<br>}"
	movecloud[2] =
		"@keyframes movecloud3 {<br>0%{left: 4%;}<br>16%{left: 16%;}<br>33% {left: 40%;}<br>50% {left: 70%;}<br>100% {left: 101%;}<br>}"
	movecloud[3] =
		"@keyframes movecloud4 {<br>0%{ right: 33%;} <br>25% {right: 25%;}<br>50% {right: 17%;}<br> 75%{right: 9%;}<br>100% {right: -1%;}<br>}"
	movecloud[4] = "@keyframes movecloud5 {<br>0%{ right: 13%;} <br>50% {right: 8%;} <br>100% {right: -1%;}<br>}"
	movecloud[5] = "@keyframes movecloud6 {<br>0%{ right: 3%;}   <br>100% {right: -1%;}<br>}"

	var movecloud1 = [
		"movecloud1",
		"movecloud2",
		"movecloud3",
		"movecloud4",
		"movecloud5",
		"movecloud6"
	]
	var movecloud2 = [
		"#cloud1",
		"#cloud2",
		"#cloud3",
		"#cloud4",
		"#cloud5",
		"#cloud6"
	]
	// var iteminfo;
	// if (localStorage.item != null) {
	// 	iteminfo = localStorage.item;
	// 	var item = $("#items>input[type=checkbox]");
	// 	var infos = iteminfo.split(";");
	// 	if (infos.length > 0) {
	// 		for (i = 0; i < item.length; i++) {
	// 			var val = item[i].val();
	// 			if (infos.includes(val)) {
	// 				item[i].check = true;
	// 			}
	// 		}
	// 	}
	// }
	$("#btn_code").click(function() {
		var sl_timing = parseInt($("#sl_timing2").find("option:selected").val());
		var ani=anicode[sl_timing];
		if ( ani== undefined||ani=="") {
			alert("请先添加该元素的动画");
		} else {
			var str1 = "animation:" + anicode[sl_timing];
			$("#codecon").text(str1);
			var str2 = "";
			if (sl_timing < 3) {
				str2 = keycode[sl_timing];
				$("#codekey").html(str2);
				$("#codekey").css("height","300px");
				$("#copyright").css("margin-top","70px");
			} else {
				for (j = 0; j < 6; j++) {
					str2 += "<div class='codekeyitem'>" + movecloud[j] + "</div>";
				}
				$("#codekey").html(str2);
				$("#codekey").css("height","420px");
				$("#copyright").css("margin-top","170px");
			}
		}
	})
	$("#enter").click(function() {

		var item = $("#items>input[type=checkbox]");
		for (i = 0; i < item.length; i++) {
			if (item[i].checked) {
				var anname = items1[i] + " ";
				var strcs = $("#txtduration").val() + "s " + $("#sl_timing").find("option:selected").text();
				if (parseInt($("#txtdelay").val()) > 0) {
					strcs = strcs + " " + $("#txtdelay").val();
				}
				var infi = $("#infinite");
				if (infi[0].checked) {
					strcs = strcs + " " + "infinite";
				}

				if ($("#alternate")[0].checked) {
					strcs = strcs + " " + "alternate";
				}

				if (i == 4) {
					for (j = 0; j < movecloud1.length; j++) {
						var ani1 = movecloud1[j] + " " + strcs + "," + anname + strcs;
						var cl = $(movecloud2[j]);
						cl.css("animation", ani1);
						anicode[i] = ani1;
					}

				} else {
					$(items2[i]).css("animation", anname + strcs);
					anicode[i] = anname + strcs;
				}
			}

		}

	});

})
